<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>房间新增</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/common.css">
<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />

<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap2/js/bootstrap.min.js"></script>
<script src="js/select2/select2.min.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>

<script type="text/javascript">
	var s2 ,
		s3;
	$(document).ready(function() {
		s2 = $("#direction").select2({
			tags : true
		});
		s3 = $("#roomUse").select2();
		//$(".js-example-single").select2();
		s2.val('${ri.direction}').trigger("change");
		s3.val('${ri.roomUse}').trigger("change");
		//房间状态
		s2 = $("#roomStatus").select2();
		s2.val('${ri.roomStatus}').trigger("change");
		//如果已经保存过了，则开启只读状态
		<c:if test="${optVal==1 }">
			$("#roomInfoAdd").find("input,textarea").attr("readonly",true);
		   	$("#roomInfoAdd").find("select,.addbtn").attr("disabled",true);
		   	$(".buttons").hide();
		</c:if>
		<c:if test="${optVal==0 }">
			/* var isPropertyOwner = '${isPropertyOwner}';
			if(isPropertyOwner != '0'){
				s2.val('待出租').trigger("change");
			}else{ */
				s2.val('空置').trigger("change");
			//}
		</c:if>
	});
</script>
<style type="text/css">
#roomNum input {
	width: 60px;
}

#roomNum th {
	background: #d70b16;
	color: #fff;
}
</style>
</head>
<body>
	<form action="roomInfo/addRoomInfo" id="roomInfoAdd" method="post"
		onsubmit="return false;">
		<div style="margin:20px 0px;">
			<table id="roomNum" class="table table-bordered">
				<thead>
					<tr>
						<th>房间号</th>
						<th>建筑面积</th>
						<th>套内建面</th>
						<th>户型</th>
						<th>朝向</th>
						<th>用途</th>
						<th>状态</th>
						<th class="buttons">操作</th>
					</tr>
				</thead>
				<tbody style="background:#eee">
					<tr>
						<td><input name="roomNum" id="roomNo" value="${ri.roomNum }" /><span
							id="roomNo_msg" style="color:red"></span></td>
						<td><input name="buildingArea" id="buildingArea"
							value="<fmt:formatNumber value="${ri.buildingArea }" pattern="##0.00"/>" /> ㎡</td>
						<td><input name="setInArea" id="setInArea"
							value="<fmt:formatNumber value="${ri.setInArea }" pattern="##0.00"/>" /> ㎡</td>
						<td><input name="houseType" id="houseType" style="width:90px"
							value="${ri.houseType }" /></td>
						<td><select class="js-example-placeholder-single"
							name="direction" id="direction" style="width:70px;">
								<c:forEach items="${ directionList}" var="direct">
									<c:if test="${not empty direct}">
										<option value="${direct }">${direct }</option>
									</c:if>
								</c:forEach>
						</select></td>
						<td><select class="js-example-single" name="roomUse"
							id="roomUse" style="width:80px;">
								<option value="办公">办公</option>
								<option value="商业">商业</option>
								<option value="居住">居住</option>
						</select></td>
						<td><select class="js-example-single" name="roomStatus"
							id="roomStatus" style="width:80px;">
								<%-- <c:if test="${isPropertyOwner == '0'}"><option value="空置">空置</option></c:if> --%>
								<option value="空置">空置</option>
								<option value="待出租">待出租</option>
								<option value="自用">自用</option>
								<option value="出租">出租</option>
						</select></td>
						<td class="buttons">
							<!-- <button class="btn btn-danger radius" type="submit">提交</button> -->
							<c:choose>
								<c:when test="${empty ri}">
									<button class="btn btn-danger radius my-btn"
										onclick="saveRoomInfo(0)" type="button">提交</button>
									<button class="btn btn-danger radius my-btn"
										onclick="saveRoomInfo(1)" type="button">保 存</button>
									<a class="btn btn-default radius"
										onClick="resetForms('roomInfoAdd');"> 重置 </a>
									<br />
								</c:when>
								<c:otherwise>
									<button id="modifyBtn" class="btn btn-danger radius my-btn hidbtn"
										onclick="saveRoomInfo(3)" type="button">启用编辑</button>
									<button class="btn btn-danger radius my-btn"
										onclick="saveRoomInfo(2)" type="button">修改</button>
									<a class="btn btn-default radius"
										onClick="resetForms('roomInfoAdd');"> 重置 </a>
								</c:otherwise>
							</c:choose>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<input type="hidden" name="fkBuildingUnit" id="fkBuildingUnit"
			value=""> <input type="hidden" name="roomid"
			id="entityId_roomid" value="${ri.id }" />
	</form>
	<script type="text/javascript">
		var flag;
		$(function() {
			//初始化表单
			mySubmit("roomInfoAdd", initPark, successPark);
			$("#roomNo").focus();
			//失去焦点触发函数
			$("#roomNo").blur(function(){
				var fkBuildingUnit = parent.buildFloorId;
				var roomNo = $("#roomNo").val();
				var oldNo = '${ri.roomNum}';
				$.post("roomInfo/getRoomInfoByRoomNum",{fkBuildingUnit:fkBuildingUnit,roomNum:roomNo},function(data,status){
					if(data.msg=="success"){
			        	$("#roomNo_msg").text("");
			        	flag = true;
	    			}else{
	    				if(roomNo==oldNo){
			        		$("#roomNo_msg").text("");
				        	flag = true;
			        	}else{
		    				$("#roomNo_msg").text("已存在");
		    				flag = false;
			        	}
	    			}
				},"json");
			});
		});
		
		
		
		var optRoom;
		//optPlanStage操作字段，0：临时保存；1：新增；2：修改  
		function saveRoomInfo(val){
			optRoom=val;
			if(val==3){
				//解除锁定状态
				var index=layer.confirm('确定开启编辑状态？', {
				 	offset:'20%',
					shade:0
				}, function(){
					$("#roomNo").focus();
				  //去除只读开启按钮编辑
				   $("#roomInfoAdd").find("input,textarea").attr("readonly",false);
				   $("#roomInfoAdd").find("select,.addbtn").attr("disabled",false);
				   $("#roomInfoAdd #modifyBtn").hide();
				   $("#roomInfoAdd .hidbtn").addClass("showbtn");
				   layer.close(index);
				});
			}else{
				$("#roomInfoAdd").submit();
			}
		}
		
		//封装表单数据为json
		function initPark() {
			if(flag){
				//封装基础数据
				var id = $("#roomInfoAdd #entityId_roomid").val();
				var roomNum = $("#roomNo").val();
				var buildingArea = $("#buildingArea").val();
				var setInArea = $("#setInArea").val();
				var houseType = $("#houseType").val();
				var direction = $("#direction").val();
				var roomUse = $("#roomUse").val();
				var roomStatus = $("#roomStatus").val();
				var fkBuildingUnit = parent.buildFloorId;//2017.12.04由单元id更改为楼层id
				setInArea = parseFloat(setInArea);
				buildingArea = parseFloat(buildingArea);
				if(roomNum==""||roomNum==null){
					layer.msg("请输入房间号");
					$("#roomNo").focus();
					return null;
				}else if (!testNum(buildingArea)||buildingArea<=0) {
					layer.msg("建筑面积请输入数值且数值要大于0㎡");
					$("#buildingArea").focus();
					return null;
				} else if (!testNum(setInArea)||setInArea<=0) {
					layer.msg("套内面积请输入数值且数值要大于0㎡");
					$("#setInArea").focus();
					return null;
				} else if(setInArea>=buildingArea){
					layer.msg("套内面积要小于建筑面积");
					$("#setInArea").focus();
					return null;
				} else if(roomStatus==""||roomStatus==null){
					layer.msg("房间状态不能为空");
					$("#roomStatus").focus();
					return null;
				}else {
					return {
						id:id,
						fkBuildingUnit : fkBuildingUnit,//2017.12.04由单元id更改为楼层id
						roomNum : roomNum,
						buildingArea : buildingArea,
						setInArea : setInArea,
						houseType : houseType,
						direction : direction,
						roomUse : roomUse,
						roomStatus : roomStatus,
						opt:optRoom,
						pid:top.projectID
					};
				}
			}else{
				layer.msg("请输入房间号");
				return null;
			}
		}
	
		//成功后调用方法
		function successPark(responseText) {
			if (responseText.success) {
				layer.msg("保存成功！",{
		    		//anim: 5,
		    		time: 2000
			    	},function(){
			    		//重置表单
						$("#roomInfoAdd")[0].reset();
						//重新点击父页面已被选择的元素，以达到刷新房间号的目的
						$("div.nav-floor ul.floor-list li[class='active']", parent.document).click();
						window.parent.updateRoom();
		    	});
			} else {
				layer.msg('保存失败！');
			}
		}
	</script>
</body>
</html>
